<template>
	<view class="main-content">
		<view class="content-main-content">
			<view class="card">
				<view class="tops" style="z-index: 999;">
					<img :src="state.myInfo.Photo || '/static/img/defaultPhoto2.png'" mode="aspectFit" class="mine_photo" />
					<view class="content">
						<view class="title" style='margin-top: 50rpx;'>{{state.memberInfo?.F_QUQY_COMPANY?.Name[0]?.Value||state.myInfo.CustomName}}</view>
						<view class="team" style='opacity: 0.6;margin-top: 20rpx;'>{{state.memberInfo?.Name[0]?.Value||state.myInfo.UserName}}</view>
						<view class="team" style='opacity: 0.6;margin-top: 10rpx;'>({{state.memberInfo?.F_QUQY_MulTYPE||'司机'}})</view>
					</view>
				</view>
			</view>
		</view>
		<van-cell title="修改密码" is-link icon="" style='border-top: 1px solid #f2f2f4;margin-top: 40rpx;' to="/views/tabs/my/ChangePassword" />
		<van-button type="primary" size="small" block @click='loginOut'>退出</van-button>
	</view>
</template>

<script setup>
	import http from '/api/api.js'
	import { reactive } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { confirm } from '../../../utils/utils.js'
	const state = reactive({
		myInfo: {},
		memberInfo: {
			Name: [],
			F_QUQY_COMPANY: {
				Name: []
			}
		}
	})

	const imgError = () => {
		state.myInfo.Photo = init()
	}

	// 退出登录
	const loginOut = () => {
		confirm("请确认退出账号！").then(() => {
			state.myInfo = {}
			state.memberInfo = {
				Name: [],
				F_QUQY_COMPANY: {
					Name: []
				}
			}
			uni.navigateTo({
				url: "/views/login/Login"
			})
		}).catch(() => {})
	}

	onShow(() => {
		state.myInfo = uni.getStorageSync('myInfo')
		let minfo = uni.getStorageSync('memberInfo')
		if (minfo) state.memberInfo = minfo
	})
</script>

<style lang="scss" scoped>
	::v-deep .van-icon-manager,
	::v-deep .van-icon-setting {
		color: rgba(115, 186, 231);
	}

	::v-deep .van-icon {
		height: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 34rpx;
		margin-right: 10rpx;
	}

	::v-deep .van-cell__title {
		display: flex;
		align-items: center;
	}

	.main-content {
		height: 100%;
		width: 100%;
		// box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;

		.content-main-content {
			position: relative;
			height: 370rpx;
			width: 100%;
			// background-color: rgba(217, 217, 217, .3) !important;
			background-image: url('/static/img/my_bgc_under.jpg');
			background-repeat: no-repeat;
			background-size: 100% 80%;
			padding-top: 20rpx;
			box-sizing: border-box;

			.card {
				border-radius: 10rpx;
				box-sizing: border-box;
				height: 300rpx;
				width: calc(100% - 70rpx);
				background: url('/static/img/my_bgc.jpg') no-repeat center center;
				background-size: 366px 340rpx;
				position: absolute;
				left: 50%;
				top: 60%;
				transform: translate(-50%, -50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.tops {
					position: relative;
					height: 270rpx;
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;

					.mine_photo {
						height: 140rpx;
						width: 140rpx;
						border-radius: 50%;
						position: absolute;
						top: -50rpx;
						background-color: #fff;
					}

					.content {
						margin-top: 50rpx;
						color: #fff;
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.title {
							font-weight: 550;
						}

						view {
							font-size: 28rpx;
							width: 100%;
							display: flex;
							letter-spacing: 3px;
							align-items: center;
							justify-content: center;
						}
					}
				}

			}

			::v-deep .van-cell,
			.van-cell--clickable {
				margin-top: -20rpx;
				padding-left: 50rpx;
				border-bottom: 1px solid #f7f7f7;
				height: 100rpx;
			}
		}

		::v-deep .van-button {
			height: 74rpx;
			width: 660rpx;
			position: fixed;
			bottom: 120rpx;
		}
	}
</style>